import React from 'react';
import { Button } from '@mui/material';
import { styled } from '@mui/material/styles';
import Tooltip from '../general/Tooltip';

interface NetworkControlButtonsProps {
  canvasBtnCls?: string;
  controlPanelShow?: () => void;
  [key: string]: any;
}

const StyledContainer = styled('div')(({ theme }) => ({
  position: 'absolute',
  top: theme.spacing(35.5),
  left: '45px',
}));

const StyledButton = styled(Button)(() => ({
  width: '24px !important',
  height: '24px !important',
  position: 'absolute',
  minWidth: '24px !important',
  padding: '3px 8px',
}));

/**
 * NetworkControlButtons Component
 * Control buttons for the network visualization canvas
 */
const NetworkControlButtons: React.FC<NetworkControlButtonsProps> = ({
  canvasBtnCls,
  controlPanelShow,
  ...otherProps
}) => {
  return (
    <StyledContainer>
      <div style={{ position: 'relative' }}>
        <Tooltip title="Control panel" placement="left" className={canvasBtnCls}>
          <div>
            <StyledButton
              onClick={controlPanelShow}
              id="ControlPanelButton"
              {...otherProps}
            >
              <i className="fa fa-list" />
            </StyledButton>
          </div>
        </Tooltip>
      </div>
    </StyledContainer>
  );
};

export default NetworkControlButtons;

